<template>
	<div class="loading-container">
		<div class="loading-spinner"></div>
		<div class="loading-text">Loading...</div>
	</div>
</template>

<style>
	.loading-container {
		position: fixed;
		left: 48%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.loading-spinner {
		border: 8px solid #f3f3f3;
		border-top: 8px solid #3498db;
		border-radius: 50%;
		width: 50px;
		height: 50px;
		animation: spin 1s linear infinite;
		/* 使用 CSS 动画 */
	}

	.loading-text {
		margin-top: 20px;
		font-size: 18px;
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>